<template>
  <img :id="`barcode${index}${index2}`" :style="{ width: '100%', height: '100%' }" />
</template>

<script lang="ts" setup>
  import { ref, onMounted, nextTick, toRefs } from 'vue'
  import JsBarcode from 'jsbarcode'
  const props = defineProps({
    //子组件接收父组件传递过来的值
    index: Number,
    index2: Number,
  })
  //使用父组件传递过来的值
  const { index2, index } = toRefs(props)
  //(#对应容器中的id,是条码的携带的信息,是条码的配置信息)
  const options2 = ref({
    displayValue: false,
    fontSize: 10,
    height: 100,
    width: 5,
    textMargin: 1,
    margin: 0,
  })
  onMounted(() => {
    nextTick(() => {
      JsBarcode(`#barcode${index.value}${index2.value}`, String(`Hello world!`), options2.value)
    })
  })
</script>

<style lang="scss" scoped></style>
